<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
<div id="formBox" class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-accept-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">用户账号：</label>
            <div class="col-sm-8">
                <input id="userLoginName" name="userLoginName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">承兑商状态：</label>
            <div class="col-sm-8">
                <select name="accoutState" class="form-control m-b" th:with="type=${@dict.getType('pay_accout_state')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">是否接单：</label>
            <div class="col-sm-8">
                <select name="acceptState" class="form-control m-b"
                        th:with="type=${@dict.getType('pay_user_accpt_order')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">邀请代理编号：</label>
            <div class="col-sm-8">
                <input id="inviteId" name="inviteId" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">额度：</label>
            <div class="col-sm-8">
                <input id="usdtQuota" name="usdtQuota" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">姓名：</label>
            <div class="col-sm-8">
                <input id="realname" name="realname" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">手机号码：</label>
            <div class="col-sm-8">
                <input id="phonenumber" name="phonenumber" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">国家：</label>
            <div class="col-sm-8">
                <input id="country" name="country" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">行业：</label>
            <div class="col-sm-8">
                <input id="industry" name="industry" class="form-control" type="text">
            </div>
        </div>
        <div v-show="authType == '1'" class="form-group">
            <label class="col-sm-3 control-label">身份证正面：</label>
            <div class="col-sm-8">
                <img id="certImgFont" :src="certImgFont" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
            </div>
        </div>
        <div v-show="authType == '1'" class="form-group">
            <label class="col-sm-3 control-label">身份证背面：</label>
            <div class="col-sm-8">
                <img id="certImgBack" :src="certImgBack" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
            </div>
        </div>
        <div v-show="authType == '2'" class="form-group">
            <label class="col-sm-3 control-label">护照照片：</label>
            <div class="col-sm-8">
                <img id="certImgPass" :src="certImgPass" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">实名认证状态：</label>
            <div class="col-sm-8">
                <select name="certState" class="form-control m-b"
                        th:with="type=${@dict.getType('pay_user_cert_state')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">自我介绍：</label>
            <div class="col-sm-8">
                <input id="profile" name="profile" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">支付宝账户：</label>
            <div class="col-sm-8">
                <input id="zfbNo" name="zfbNo" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">支付宝姓名：</label>
            <div class="col-sm-8">
                <input id="zfbName" name="zfbName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">支付宝二维码：</label>
            <div class="col-sm-8">
                <img id="zfbImg" :src="zfbImg" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">支付宝状态：</label>
            <div class="col-sm-8">
                <select name="zfbState" class="form-control m-b"
                        th:with="type=${@dict.getType('pay_accout_zfb_state')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">微信账户：</label>
            <div class="col-sm-8">
                <input id="wxNo" name="wxNo" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">微信姓名：</label>
            <div class="col-sm-8">
                <input id="wxName" name="wxName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">微信二维码：</label>
            <div class="col-sm-8">
                <img id="wxImg" :src="wxImg" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">微信状态：</label>
            <div class="col-sm-8">
                <select name="wxState" class="form-control m-b" th:with="type=${@dict.getType('pay_accout_wx_state')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">银行卡账号：</label>
            <div class="col-sm-8">
                <input id="yhkNo" name="yhkNo" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">银行卡姓名：</label>
            <div class="col-sm-8">
                <input id="yhkName" name="yhkName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">银行卡开户行：</label>
            <div class="col-sm-8">
                <input id="yhkBank" name="yhkBank" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">银行卡状态：</label>
            <div class="col-sm-8">
                <select name="yhkState" class="form-control m-b"
                        th:with="type=${@dict.getType('pay_accout_yhk_state')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
    </form>
</div>
<script th:src="@{/js/vue.min.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/ajaxupload.js}"></script>
<div th:include="include::footer"></div>
<script type="text/javascript">
    var prefix = ctx + "manager/user";
    var roleid = "3";
    var icon = "<i class='fa fa-times-circle'></i> ";
    $("#form-accept-add").validate({
        rules: {
            userLoginName: {
                required: true,
                minlength: 5,
                maxlength: 20
            },
            accoutState: {
                required: true
            },
            acceptState: {
                required: true
            },
            yhkState: {
                required: true
            },
        },
        messages: {
            userLoginName: {
                required: icon + "请输入用户账号",
                minlength: icon + "用户账号不能小于5个字符",
                maxlength: icon + "用户账号不能大于20个字符"
            },
        }
    });

    function submitHandler() {
        if ($.validate.form()) {
            var params = $('#form-accept-add').serialize();
            params += '&zfbImg=' + modelBean.zfbImg;
            params += '&wxImg=' + modelBean.wxImg;
            params += '&certImgFont=' + modelBean.certImgFont;
            params += '&certImgBack=' + modelBean.certImgBack;
            params += '&certImgPass=' + modelBean.certImgPass;
            $.operate.save(prefix + "/add/" + roleid, params);
        }
    };

    var modelBean = {
        zfbImg: '',
        wxImg: '',
        certImgFont: '',
        certImgBack: '',
        certImgPass: ''
    };
    //
    var vm = new Vue({
        el: '#formBox',
        data: {
            authType: '[[${authType}]]',
            zfbImg: ctx + ('img/no_img.png'),
            wxImg: ctx + ('img/no_img.png'),
            certImgFont: ctx + ('img/no_img.png'),
            certImgBack: ctx + ('img/no_img.png'),
            certImgPass: ctx + ('img/no_img.png'),
        },
        methods: {}
    });

    $(function () {
        new AjaxUpload('#certImgFont', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_pay_img',
                type: 'auth',
                state: '0',
                puth: '11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgFont = ctx + r.url;
                    modelBean.certImgFont = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });
        new AjaxUpload('#certImgBack', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_pay_img',
                type: 'auth',
                state: '0',
                puth: '11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgBack = ctx + r.url;
                    modelBean.certImgBack = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });
        new AjaxUpload('#certImgPass', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_pay_img',
                type: 'auth',
                state: '0',
                puth: '11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgPass = ctx + r.url;
                    modelBean.certImgPass = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });
        new AjaxUpload('#zfbImg', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_pay_img',
                type: 'pay',
                state: '0',
                puth: '11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.zfbImg = ctx + r.url;
                    modelBean.zfbImg = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });
        new AjaxUpload('#wxImg', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_pay_img',
                type: 'pay',
                state: '0',
                puth: '11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.wxImg = ctx + r.url;
                    modelBean.wxImg = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });
    });

</script>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/ajaxupload.js}"></script>
<div th:include="include::footer"></div>
</body>
</html>
